<template>
    <div class="playListComment">
        <div class="main">
            <!--评论输入框-->
            <div class="commnetForm">
                <el-input v-model="commentInfo" :placeholder="isCanSend ? '' : '请先登录'"  type="textarea"></el-input>
                <div class="operation">
                    <el-button @click="sendCommnet">评论</el-button>
                </div>
            </div>
            <!--精彩评论-->
            <div class="hotComments" v-if="comments.hotComments != undefined">
                <div class="title">精彩评论</div>
                <commentDetail :comments="comments.hotComments" />
            </div>
            <!--最新评论-->
            <div class="comments" ref="comments">
                <div class="title">最新评论({{comments.total}})</div>
                <commentDetail :comments="comments.comments" />
            </div>
            <!--分页-->
            <div class="paging">
                <el-pagination
                background 
                :page-size="20"
                :page-count="pagerCount"
                :pager-count="7"
                layout="prev, pager, next"
                :total="total"
                @current-change="pageChange"
                >
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import commentDetail from '../../common/comment/commentDetail'
import {dateFomat} from '../../../util/tool'
import {_getPlaylistComment,_getAlbumComment} from '../../../network/detail'
import {_sendComment} from '../../../network/comment'
export default {
    name: 'playListComment',
    props: [
        
    ],
    data() {
        return {
            isCanSend:sessionStorage.getItem('cloud_cookie'),
            commentInfo:'',
            // 歌单评论列表
            comments:[],
            total:0,
            pagerCount:Math.ceil(this.total / 20),
            currentPage:1,
            commentType:0,
        };
    },
    computed: {

    },
    created() {
        if(this.$route.name == "PlayListDetail"){
            this.getPlaylistComment(0)
            this.commentType = 2
        }
        if(this.$route.name == "Album"){
            this.getAlbumComment(0)
            this.commentType = 3
        }
    },
    mounted() {
        
    },
    updated() {
    },
    watch: {

    },
    methods: {
        // 发送评论
        sendCommnet(){
            if(!this.isCanSend){
                return this.$message({
                    message:'请先登录',
                    type:'error'
                })
            }else{
                _sendComment(1,this.commentType,this.$route.query.is,this.commentInfo,this.isCanSend)
                .then( res => {
                    console.log(res)
                    if(res.data.code == 200){
                        this.$message({
                            message:"评论成功",
                            type:'success'
                        })
                    }
                })
            }
        },
        // 获取歌单评论
        getPlaylistComment(offset){
            // 获取歌单评论
            _getPlaylistComment(this.$route.query.id,offset)
            .then(res => {
                this.comments = res.data
                this.total= res.data.total
            })
        },
        // 获取专辑评论
        getAlbumComment(offset){
            // 获取歌单评论
            _getAlbumComment(this.$route.query.id,offset)
            .then(res => {
                console.log(res.data)
                this.comments = res.data
                this.total= res.data.total
            })
        },
        // 监听页数改变
        pageChange(currentPage){
            console.log(currentPage)
            if(this.$route.name == "PlayListDetail"){
            this.getPlaylistComment(currentPage-1)
            }
            if(this.$route.name == "Album"){
                this.getAlbumComment(currentPage-1)
            }
            this.currentPage = currentPage
            if(this.$route.name == "PlayListDetail"){
            document.getElementsByClassName('playList')[0].scrollTop = 510
            }
            if(this.$route.name == "Album"){
                document.getElementsByClassName('album')[0].scrollTop = 510
            }       
        },
        
    },
    filters:{
        dateFomat(el){
            return dateFomat(el)
        }
    },
    components: {
        commentDetail
    },
};
</script>

<style scoped lang="less">
.position_flex(@jc:space-between,@ai:center){
  display: flex;
  align-items: @ai;
  justify-content: @jc;
}
.main{
    width: 95%;
    height: 1000px;
    margin: auto;
    position: relative;
    .main>div{
        margin-top: 20px;
    }
    .commnetForm{
        padding: 10px;
        background-color: #ccc;
        .operation{
            .position_flex(flex-end,center);
            box-sizing: border-box;
            .el-button{
                margin-top: 20px;
            }
        }
    }
    .hotComments,.comments{
        .title,.comment_item{
            border-bottom: 1px solid;
            padding: 20px 0
        }
        
    }
    .paging{
        text-align: center;
        margin-bottom: 20px;
        
    }
}
</style>
